<#macro pageLoad>
<div class="page-loader-wrapper">
    <div class="loader">
        <div class="preloader">
            <div class="spinner-layer pl-red">
                <div class="circle-clipper left">
                    <div class="circle"></div>
                </div>
                <div class="circle-clipper right">
                    <div class="circle"></div>
                </div>
            </div>
        </div>
        <p>Please wait...</p>
    </div>
</div>
</#macro>

<#macro topBar>
<nav class="navbar">
    <div class="container-fluid">
        <div class="navbar-header">
            <a href="javascript:void(0);" class="navbar-toggle collapsed" data-toggle="collapse"
               data-target="#navbar-collapse" aria-expanded="false"></a>
            <a href="javascript:void(0);" class="bars"></a>
            <a class="navbar-brand" href="index.html">ADMINBSB - MATERIAL DESIGN</a>
        </div>
        <div class="collapse navbar-collapse" id="navbar-collapse">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="${base}/logout.htm"  data-close="true" title="点击退出"><i
                        class="material-icons">remove_circle_outline</i></a></li>
                <li><a href="javascript:void(0);" data-close="true">
                    <i class="material-icons">account_circle</i>
                        <span style="font-size: 24px;"><@shiro.principal property="username"></@shiro.principal></span>
                </a> </li>
                <li class="pull-right"><a href="javascript:void(0);" class="js-right-sidebar" data-close="true"><i
                        class="material-icons">more_vert</i></a></li>
            </ul>
        </div>
    </div>
</nav>
</#macro>

<#macro leftSidebar flag="home">
<aside id="leftsidebar" class="sidebar"  >
    <!-- User Info -->
<#--<div class="user-info">-->
<#--<div class="image">-->
<#--<img src="images/user.png" width="48" height="48" alt="User"/>-->
<#--</div>-->
<#--<div class="info-container">-->
<#--<div class="name" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">John Doe</div>-->
<#--<div class="email">john.doe@example.com</div>-->
<#--<div class="btn-group user-helper-dropdown">-->
<#--<i class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">keyboard_arrow_down</i>-->
<#--<ul class="dropdown-menu pull-right">-->
<#--<li><a href="javascript:void(0);"><i class="material-icons">person</i>Profile</a></li>-->
<#--<li role="seperator" class="divider"></li>-->
<#--<li><a href="javascript:void(0);"><i class="material-icons">group</i>Followers</a></li>-->
<#--<li><a href="javascript:void(0);"><i class="material-icons">shopping_cart</i>Sales</a></li>-->
<#--<li><a href="javascript:void(0);"><i class="material-icons">favorite</i>Likes</a></li>-->
<#--<li role="seperator" class="divider"></li>-->
<#--<li><a href="javascript:void(0);"><i class="material-icons">input</i>Sign Out</a></li>-->
<#--</ul>-->
<#--</div>-->
<#--</div>-->
<#--</div>-->

    <div class="menu">
        <ul class="list">
            <li class="<#if flag=='home'>active</#if>">
                <a href="${base}/index.htm">
                    <i class="material-icons">home</i>
                    <span>Home</span>
                </a>
            </li>
            <li class="<#if flag=='user' || flag=='role' || flag=='resource' || flag=='menu'>active</#if>">
                <a href="javascript:void(0);" class="menu-toggle">
                    <i class="material-icons">supervisor_account</i>
                    <span>系统管理</span>
                </a>
                <ul class="ml-menu">
                    <li class="<#if flag=='user' >active</#if>">
                        <a href="${base}/sys/user/index.htm">用户管理</a>
                    </li>
                    <li class="<#if flag=='role' >active</#if>">
                        <a href="${base}/sys/role/index.htm">角色管理</a>
                    </li>
                    <li class="<#if flag=='resource' >active</#if>">
                        <a href="${base}/sys/resource/index.htm">权限管理</a>
                    </li>
                    <li class="<#if flag=='menu' >active</#if>">
                        <a href="${base}/sys/menu/index.htm">菜单管理</a>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</aside>
</#macro>





<#macro rightSidebar>
<aside id="rightsidebar" class="right-sidebar">
    <ul class="nav nav-tabs tab-nav-right" role="tablist">
        <li role="presentation" class="active"><a href="#skins" data-toggle="tab">SKINS</a></li>
        <li role="presentation"><a href="#settings" data-toggle="tab">SETTINGS</a></li>
    </ul>
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane fade in active in active" id="skins">
            <ul class="demo-choose-skin">
                <li data-theme="red" class="active">
                    <div class="red"></div>
                    <span>Red</span>
                </li>
                <li data-theme="pink">
                    <div class="pink"></div>
                    <span>Pink</span>
                </li>
                <li data-theme="purple">
                    <div class="purple"></div>
                    <span>Purple</span>
                </li>
                <li data-theme="deep-purple">
                    <div class="deep-purple"></div>
                    <span>Deep Purple</span>
                </li>
                <li data-theme="indigo">
                    <div class="indigo"></div>
                    <span>Indigo</span>
                </li>
                <li data-theme="blue">
                    <div class="blue"></div>
                    <span>Blue</span>
                </li>
                <li data-theme="light-blue">
                    <div class="light-blue"></div>
                    <span>Light Blue</span>
                </li>
                <li data-theme="cyan">
                    <div class="cyan"></div>
                    <span>Cyan</span>
                </li>
                <li data-theme="teal">
                    <div class="teal"></div>
                    <span>Teal</span>
                </li>
                <li data-theme="green">
                    <div class="green"></div>
                    <span>Green</span>
                </li>
                <li data-theme="light-green">
                    <div class="light-green"></div>
                    <span>Light Green</span>
                </li>
                <li data-theme="lime">
                    <div class="lime"></div>
                    <span>Lime</span>
                </li>
                <li data-theme="yellow">
                    <div class="yellow"></div>
                    <span>Yellow</span>
                </li>
                <li data-theme="amber">
                    <div class="amber"></div>
                    <span>Amber</span>
                </li>
                <li data-theme="orange">
                    <div class="orange"></div>
                    <span>Orange</span>
                </li>
                <li data-theme="deep-orange">
                    <div class="deep-orange"></div>
                    <span>Deep Orange</span>
                </li>
                <li data-theme="brown">
                    <div class="brown"></div>
                    <span>Brown</span>
                </li>
                <li data-theme="grey">
                    <div class="grey"></div>
                    <span>Grey</span>
                </li>
                <li data-theme="blue-grey">
                    <div class="blue-grey"></div>
                    <span>Blue Grey</span>
                </li>
                <li data-theme="black">
                    <div class="black"></div>
                    <span>Black</span>
                </li>
            </ul>
        </div>
        <div role="tabpanel" class="tab-pane fade" id="settings">
            <div class="demo-settings">
                <p>GENERAL SETTINGS</p>
                <ul class="setting-list">
                    <li>
                        <span>Report Panel Usage</span>
                        <div class="switch">
                            <label><input type="checkbox" checked><span class="lever"></span></label>
                        </div>
                    </li>
                    <li>
                        <span>Email Redirect</span>
                        <div class="switch">
                            <label><input type="checkbox"><span class="lever"></span></label>
                        </div>
                    </li>
                </ul>
                <p>SYSTEM SETTINGS</p>
                <ul class="setting-list">
                    <li>
                        <span>Notifications</span>
                        <div class="switch">
                            <label><input type="checkbox" checked><span class="lever"></span></label>
                        </div>
                    </li>
                    <li>
                        <span>Auto Updates</span>
                        <div class="switch">
                            <label><input type="checkbox" checked><span class="lever"></span></label>
                        </div>
                    </li>
                </ul>
                <p>ACCOUNT SETTINGS</p>
                <ul class="setting-list">
                    <li>
                        <span>Offline</span>
                        <div class="switch">
                            <label><input type="checkbox"><span class="lever"></span></label>
                        </div>
                    </li>
                    <li>
                        <span>Location Permission</span>
                        <div class="switch">
                            <label><input type="checkbox" checked><span class="lever"></span></label>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</aside>
</#macro>

<#macro footer>
<div class="legel_footer">
    <div class="copyright">
        &copy; 2016 - 2017 <a href="javascript:void(0);">心动</a> &nbsp;&nbsp;
    </div>
    <div class="version">
        <b>Version: </b> 1.0.5
    </div>
</div>
</#macro>